import React, { Fragment, useState } from "react";
import { Button, ButtonProps, Drawer } from 'antd';
import { EditOutlined } from '@ant-design/icons';

import DictDetail from "../../DictDetail";

interface EditDictDataBtnProps extends ButtonProps {
  dictName: string;
  dictId: number;
  dictType: string;
}

const EditDictDataBtn: React.FC<EditDictDataBtnProps> = ({ dictName, dictId, dictType, size = "small", ...buttonProps }) => {
  const [visible, setVisible] = useState(false);

  const showDrawer = () => setVisible(true);
  const onClose = () => setVisible(false);

  return <Fragment>
    <Button
      icon={<EditOutlined />}
      onClick={showDrawer}
      {...buttonProps}
    >字典数据</Button>

    <Drawer
      title={`字典数据(${dictName})`}
      placement="right"
      onClose={onClose}
      open={visible}
      width="70%"
      styles={{
        body: { padding: 5 }
      }}
    >
      {visible && <DictDetail dictId={dictId} dictType={dictType} />}
    </Drawer>
  </Fragment>
}


export default EditDictDataBtn;
